<template>
  <div class="fwyj-box">
    <div><span class="Res-List"></span> 服务业绩统计</div>
    <div class="Res-Date">
      <span>选择签约日期</span>
      <!-- 日期选择器 -->
      <DatePicker></DatePicker>
    </div>
    <div>
      <!-- 机构 -->
      <ResidentOption></ResidentOption>
    </div>
    <div class="chart-box">
      <div ref="barChart" :style="{ width: '1000px', height: '400px' }"></div>
    </div>
    <div>
      <div class="Res-btn">
        <el-button @click="ResDerive">导出</el-button>
      </div>
    </div>
    <div>
      <el-table show-summary="true" :data="datagender" stripe style="width: 100%;font-size: 12px;">
        <el-table-column prop="months" label="日期" align="center" />
        <el-table-column prop="service" label="服务量" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import DatePicker from "@/components/mmm/DatePicker.vue"
import ResidentOption from "@/components/mmm/ResidentOption.vue"
import api from "@/api"
import * as echarts from 'echarts';
import * as XLSX from "xlsx";
import { ElMessage } from 'element-plus'

//表格显示数据
let datagender = ref<Array<any>>([])
//创建月份数组
const monthsList = ref<Array<string>>([])
//创建服务数据数组
const serviceData = ref<Array<string>>([])
//获取echarts图表数据
const getPeopleContractData = async () => {
  const result = await api.Mdatastatistics.getPeopleContractApi({ months: 12 })
  // console.log(",,,,,,,,,,,", result.data.data.service);
  result.data.data.service.forEach((item: any) => {
    monthsList.value.push(item[0])
    serviceData.value.push(item[1])
  });
  console.log(result.data.data.service);

  console.log([...serviceData.value]);
  initBarEcharts()
  for (let i = 0; i < monthsList.value.length; i++) {
    datagender.value.push(
      { months: monthsList.value[i], service: serviceData.value[i] })
  }
  console.log("datagender", datagender.value);

}
getPeopleContractData()


const barChart = ref<HTMLElement>();
const myChart1 = ref<any>();
// 绘制柱形图
function initBarEcharts() {
  myChart1.value = echarts.init(barChart.value!);
  myChart1.value.setOption({
    title: {
      text: '服务量统计',
      x: 'left',
      itemGap: '200%',
    },
    grid: {
      top: 90
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '10%',
      left: 'left',
      icon: 'circle'
    },
    xAxis: {
      type: 'category',
      data: [...monthsList.value]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "实际服务量",
        data: [...serviceData.value],
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          color: "#409EFF"
        },
      }
    ],

  });
}

//表格导出
const ResDerive = () => {
  const data = XLSX.utils.json_to_sheet(datagender.value)//此处res.result为表格的数据
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为定义的表格中表头名
  XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名

  ElMessage({
    message: "导出成功",
    type: 'success'
  })


}

</script>

<style lang='scss' scoped>
.fwyj-box {
  @include BoxStyle;

  .Res-List {
    @include dataList;
  }

  .Res-Date {
    font-size: 12px;
    display: flex;
    color: #999;
    margin-top: 20px;

    span {
      margin-top: 3px;
    }

  }

  .chart-box {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px 20px 10px 20px;
    margin: 20px;
  }

  .Res-btn {
    text-align: right;
    margin: 20px;
  }
}
</style>